<template>
  <page :nav="false" title="邀新得万元现金" ref="pageRef" light bgColor="#000">
    <view
      class="pagae-nav"
      :style="{
        paddingTop: statusBarHeight + 'px',
        background: headerBg,
        color: headerColor,
      }"
    >
      <view class="flex-align-center relative" style="height: 80rpx">
        <text class="cuIcon-back back" @click.stop="back"></text>
        <view class="title line-ellipsis">邀新得万元现金</view>
      </view>
    </view>
    <view
      class="top"
      :style="
        ' background-color: #000;background-image:url(' +
        ossurl.mine.pulluser.top +
        ')'
      "
    >
      <view class="btnBox flex">
        <view class="marginR12 relative" style="width: 331rpx; height: 88rpx">
          <button open-type="share" class="shareBtn btn-clear">
            分享邀请链接
          </button>
        </view>
        <view class="inline" style="width: 331rpx; height: 88rpx">
          <view class="shareBtn" @click="share()">面对面邀请</view>
        </view>
      </view>
      <view class="rule" @click.stop="rule()">
        <image :src="ossurl.mine.pulluser.rule" />
      </view>
    </view>

    <view
      class="bottom relative"
      :style="
        ' background-color: #000;background-image:url(' +
        ossurl.mine.pulluser.bottom +
        ')'
      "
    >
      <view class="getMoney" @click="getMoney()">
        <view class="label">可提现金额</view>
        <view class="numBox">
          ¥
          <view class="num">{{ userData.currentCommissionAmount }}</view>
        </view>
      </view>
      <view class="myBox">
        <view class="title">
          <image :src="ossurl.mine.pulluser.title" />
        </view>
        <view class="dataBox">
          <view class="item" @click="introMessage()">
            <view class="title">邀请人数</view>
            {{ userData.promotionNum }}
            <text class="bottom-right">人</text>
          </view>
          <view class="item">
            <view class="title">邀请奖励</view>
            {{ userData.totalCommissionAmount }}
            <text class="bottom-right">元</text>
          </view>
        </view>
      </view>
    </view>

    <rule-dialog ref="ruleRef" />
    <poster
      ref="posterRef"
      :tip="tip"
      :imgs="[{ cover: ossurl.common.userShare }]"
      page="pages/award/index"
      :userId="user.username"
    />
    <people-record ref="peopleRecordRef" />
    <image
      class="pullNewBtn"
      :src="ossurl.mine.activePage.pullNewBtn"
      @click="gotoPullNewList()"
      mode="widthFix"
    />
  </page>
</template>

<script>
import resource from '@/utils/resource';
import ossurl from '@/utils/ossurl';
import ruleDialog from './rule_dialog.vue';
import store from '@/store';
import poster from '../weal_detail/poster.vue';
import peopleRecord from './people_record.vue';

export default {
  components: { ruleDialog, poster, peopleRecord },
  data() {
    return {
      resource,
      ossurl,
      userData: {},
      tip: '',
      scrollTop: 0,
    };
  },
  onLoad() {
    this.$service.wallet.getPullNewUserDetails().then((res) => {
      this.userData = res;
    });
  },
  onShareAppMessage(res) {
    if (this.$common.isLogin()) {
      const user = store.getters.user;
      return {
        title: `超级玛特，新人优惠不停！`,
        path: '/pages/award/index?pid=' + user.username,
        imageUrl: ossurl.common.userShare,
      };
    }
    return {
      title: `超级玛特，新人优惠不停！`,
      path: '/pages/award/index',
    };
  },
  computed: {
    user() {
      return this.$store.state.userInfo;
    },
    headerColor() {
      return this.scrollTop > 0 ? '#000' : '#fff';
    },
    headerBg() {
      return this.scrollTop > 0 ? '#fff' : '#000';
    },
    statusBarHeight() {
      if (this.$store.state.systemInfo) {
        return this.$store.state.systemInfo.statusBarHeight;
      }
      return 20;
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    getMoney() {
      this.$router.push('withdraw');
    },
    share() {
      this.tip = `快来和${this.user.nickname}一起免费领手办吧~`;
      this.$refs.posterRef.share();
    },
    rule() {
      this.$refs.ruleRef.show();
    },
    introMessage() {
      this.$refs.peopleRecordRef.show();
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    gotoPullNewList(){
      uni.navigateTo({
        url: '/subPackages/pages/mine/activePage/PullNewList',
      });
    }
  },
};
</script>

<style>
page {
  background: #1d1cba;
}
</style>

<style lang="scss" scoped>
.pagae-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  align-items: center;
  .title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    line-height: 72rpx;
    width: 500rpx;
  }
  .back {
    z-index: 1800;
    font-size: 32rpx;
    line-height: 32rpx;
    position: absolute;
    left: 20rpx;
    top: 24rpx;
  }
}
.top {
  height: 1120rpx;
  background-size: 100% 100%;
  position: relative;
  .btnBox {
    height: 64rpx;
    margin: 0 auto 80rpx;

    position: absolute;
    bottom: 0rpx;
    left: 30rpx;
    .shareBtn {
      font-size: 32rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: bold;
      color: #000000;
      line-height: 64rpx;
      width: 318rpx;
      height: 64rpx;
      background: #fec433;
      border-radius: 178rpx 178rpx 178rpx 178rpx;
      text-align: center;
    }
  }
}
.middle {
  width: 688rpx;
  height: 354rpx;
  margin: 40rpx auto;
}

.bottom {
  height: 586rpx;
  margin: 0 auto;
  background-size: 100% 100%;
  padding: 70rpx;
  .getMoney {
    width: 623rpx;
    height: 74rpx;
    background: rgba(182, 182, 182, 0.31);
    border-radius: 74rpx;
    padding: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label {
      width: 214rpx;
      height: 58rpx;
      background: #000000;
      border-radius: 58rpx;
      color: #fff;
      line-height: 58rpx;
      text-align: center;
    }
    .numBox {
      font-size: 28rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 350;
      color: #000000;
      display: flex;
      align-items: center;
      padding-right: 50rpx;
      .num {
        font-size: 32rpx;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: bold;
        color: #000000;
        margin-left: 20rpx;
      }
    }
  }
}
.rule {
  position: absolute;
  top: 420rpx;
  right: 60rpx;
  image {
    width: 84rpx;
    height: 62rpx;
  }
}
.myBox {
  height: 358rpx;
  background: rgba(182, 182, 182, 0.31);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 14rpx;
  margin-top: 14rpx;
  .title {
    text-align: center;
    padding: 10rpx 0;
    image {
      width: 262rpx;
      height: 64rpx;
    }
  }
  .dataBox {
    background: #f5f1e6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    padding: 32rpx;
    text-align: center;
    margin-top: 30rpx;
    .item {
      flex: 1;
      font-size: 48rpx;
      font-weight: bold;

      color: #9e9e9e;
      .bottom-right {
        font-size: 24rpx;
      }
    }
    .title {
      padding-bottom: 30rpx;
      font-size: 24rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 350;
      color: #000000;
      line-height: 34rpx;
    }
  }
}
.pullNewBtn {
  width: 104rpx;
  height: 124rpx;
  position: fixed;
  top: 600rpx;
  right: 10rpx;
  z-index: 100;
}
</style>
